<template>
  <div class="vpt-grid-filter"
       :style="vptGridStyle">
    <header class="vpt-grid-filter-header"
            :style="headerStyle">
      {{ title }}
    </header>
    <slot></slot>
  </div>
</template>
<script setup>
const props = defineProps({
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  vptGridStyle: {
    type: Object,
    default: () => ({
      marginRight: "0.22rem",
      marginBottom: "0.32rem",
      width: "2.7rem",
      height: "5.5rem",
      fontSize: "0.3rem",
    }),
  },
  headerStyle: { type: Object, default: () => ({}) },
});
</script>
<style lang="less" scoped>
.vpt-grid-filter {
  background: #1470cc1a;
  border: 0.01rem solid #e6ebf5;
  margin-right: 0.22rem;
  margin-bottom: 0.32rem;
  width: 2.7rem;
  height: 5.3rem;

  .vpt-grid-filter-header {
    font-family: HarmonyOS_SansSC_Medium;
    font-weight: 500;
    // font-size: 0.3rem;
    color: #ffffff;
    letter-spacing: 0;
    line-height: 0.2rem;
    // font-size: 0.16rem;
  }

  &:last-child {
    margin-right: 0 !important;
  }
}
</style>